<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
  <template>
    <style>
      :host {
        display: block;
        --material-primary-color: #202020;
        --material-body-text-color: #202020;
        --app-primary-color: #202020;
        --app-secondary-color: #FFFFFF;
        --app-accent-color: #eeeeee;
        --app-font-color: #202020;
        --app-font-size: 1rem;
        --app-grid-column: 1;
        --app-background-color: #fafafa;
        --app-error-color: #e53935;
        --paper-checkbox-checked-color: var( --app-primary-color);
        --paper-checkbox-checked-ink-color: var( --app-primary-color);
        --paper-toggle-button-unchecked-ink-color: var( --app-primary-color);
        --paper-toggle-button-checked-bar-color: var( --app-primary-color);
        --paper-toggle-button-checked-button-color: var( --app-primary-color);
        --paper-toggle-button-checked-ink-color: var( --app-primary-color);
        --paper-input-container-focus-color: var( --app-primary-color);
        --paper-spinner-color: var( --app-primary-color);
        background-color: var(--app-background-color);
        color: var(--app-font-color);
        font-size: var(--app-font-size);
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p {
        margin: 0;
      }

      a {
        text-decoration: none;
      }

      a:focus {
        outline: none;
      }

      ul {
        padding: 0;
        list-style: none;
      }

      nav {
        margin-top: 10px;
      }

      app-header {
        color: var(--app-secondary-color);
        background-color: var(--app-primary-color);
        --app-header-shadow: {
          -webkit-box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.2);
          height: 10px;
          bottom: -10px;
        }
      }

      app-drawer {
        border-right: 1px solid rgba(0, 0, 0, .10);
        overflow: auto;
      }

      app-drawer-layout:not([narrow]) [drawer-toggle] {
        display: none;
      }

      iron-list {
        flex: 1 1 auto;
      }

      paper-tabs {
        --paper-tab-ink: #FFFFFF;
        --paper-tabs-selection-bar-color: #FFFFFF;
        color: var(--app-secondary-color);
      }

      paper-tab[link] a {
        /* These mixins (from iron-flex-layout) center the link text. */
        @apply --layout-horizontal;
        @apply --layout-center-center;
        color: #FFFFFF;
        text-decoration: none;
      }

      paper-dialog {
        max-width: 500px;
      }

      paper-button {
        font-size: var(--app-font-size);
        font-weight: 500;
        width: 100%;
        height: 50px;
        color: #202020;
        border: 1px solid #202020;
      }

      paper-button[disabled] {
        border: 1px solid #a8a8a8;
        background: #eaeaea;
        color: #a8a8a8;
        cursor: not-allowed;
      }

      paper-button[disabled]:hover {
        cursor: not-allowed;
      }

      paper-button:hover,
      paper-button:active,
      paper-button.iron-selected,
      paper-button[active] {
        color: #ffffff;
        background-color: #202020;
      }

      paper-button.shamrock:hover,
      .shamrock:hover button {
        background-color: #43A047;
        border: 1px solid #43A047;
      }

      paper-button.thunderbird:hover,
      .thunderbird:hover button {
        background-color: #e53935;
        border: 1px solid #e53935;
      }

      paper-tooltip.profile-tooltip {
        --paper-tooltip-opacity: 1;
        --paper-tooltip-background: #FFFFFF;
        --paper-tooltip-text-color: 202020;
        width: 240px;
      }

      paper-tooltip.profile-tooltip p {
        font-size: var(--app-font-size);
        padding: 2px 0;
      }

      paper-toast.toast-verify {
        --paper-toast-background-color: #e53935;
        --paper-toast-color: #FFFFFF;
        opacity: 1;
        font-size: var(--app-font-size);
        width: 100%;
        padding: 10px;
        margin: 0;
      }

      vaadin-grid .cell.last {
        text-overflow: unset;
      }

      vaadin-combo-box,
      vaadin-text-field,
      vaadin-date-picker {
        width: 100%;
      }

      .title {
        text-align: center;
        margin: 15px 0 25px 0;
        font-weight: 400;
      }

      [hidden] {
        display: none !important;
      }

      .main-logo-title {
        font-size: 3.3rem;
        text-align: center;
        margin: 0;
      }

      .main-describe {
        font-size: 1.25rem;
        text-align: center;
        color: #999999;
        font-weight: 400;
      }

      .mobile-menu-btn {
        padding: 0;
      }

      .center {
        text-align: center;
      }

      .btn input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        display: none;
      }

      .frame {
        border: 1px solid rgba(0, 0, 0, .10);
        border-radius: 5px;
        min-height: 280px;
        overflow: auto;
        display: flex;
        flex-direction: column;
      }

      .drawer-list>a {
        display: block;
        padding: 10px 50px;
        text-decoration: none;
        color: var(--app-primary-color);
      }

      .drawer-list>a:hover {
        background-color: #f5f5f5;
      }

      .drawer-list>a.iron-selected {
        color: #fff;
        background-color: var(--app-primary-color);
        cursor: default;
      }

      .app-logo {
        width: 120px;
        height: 120px;
        margin: 20px auto 10px auto;
        display: block;
      }

      .page-title {
        display: none;
        margin-left: 10px;
        color: var(--app-secondary-color);
        font-weight: 400;
      }

      .profile-image {
        width: 100px;
        height: 100px;
        border: 1px solid rgba(0, 0, 0, .10);
        background-size: contain;
        border-radius: 50%;
        margin: 10px auto;
      }

      .wrap {
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }

      .flex-item {
        width: auto;
        flex: 1;
      }

      .flex-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        margin: 0;
        list-style: none;
        -ms-box-orient: horizontal;
      }

      .toast-flex-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
        align-self: stretch;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: auto;
      }

      .toast-flex-item:first-child {
        -ms-flex-item-align: stretch;
        align-self: stretch;
      }

      .toast-flex-item:last-child {
        -ms-flex-item-align: end;
        align-self: flex-end;
      }

      .toast-flex-item {
        margin: auto 0;
      }

      .close-toast-button {
        text-transform: none;
        color: #FFFFFF;
        float: right;
      }

      .flex-center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        margin: 10px 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
      }

      .center {
        text-align: center;
      }

      .item {
        border-bottom: 1px solid #eee;
        padding: 10px;
      }

      .separator-line {
        border-bottom: 1px solid rgba(0, 0, 0, .10);
        text-align: center;
      }

      .card {
        margin: 10px;
        padding: 20px;
        border-radius: 10px;
        background-color: #FFFFFF;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }

      .btn {
        margin: 20px 0 0;
        width: 100%;
      }

      .big-btn button {
        min-width: 350px;
        display: block;
        font-size: 1.75rem;
        font-weight: 300;
      }

      .big {
        margin: 10px 0 20px 0;
      }

      .main-card {
        margin-top: 26px;
      }

      .bold {
        font-weight: 500;
      }

      .logout-btn {
        margin: 10px auto;
        width: 75%;
      }


      .left {
        text-align: left;
        font-weight: 500;
      }

      .right {
        text-align: left;
        font-weight: 400;
      }

      ul .parent {
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
      }

      ul .parent>li {
        flex: 1;
        margin: 1rem 0;
      }

      .wrap {
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }

      .thumbnail {
        width: 24px;
        height: 24px;
      }

      .blink {
        animation: blinker 1s linear infinite;
      }

      @keyframes blinker {
        50% {
          opacity: 0;
        }
      }

      /* Mobile - Portrait Tablet screen */

      @media screen and (min-device-width: 300px) and (max-device-width: 768px) {

        :host {
          --app-grid-columns: 1;
        }

        .btn {
          width: 100%;
        }

        .main-describe {
          display: none;
        }

        .user-info {
          display: none;
        }

        .tab-title {
          display: none;
        }

        .page-title {
          display: inline-block;
          font-size: var(--app-font-size);
          margin-left: 5px;
        }

        .main-title,
        .title {
          font-size: 1.5rem;
        }
      }

      /* Landscape Tablet - Small Desktop screen */

      @media screen and (min-device-width: 769px) and (max-device-width: 1200px) {
        :host {
          --app-grid-columns: 2;
        }
      }

      /* Medium Resolution (1080p) screen */

      @media screen and (min-device-width: 1201px) and (max-device-width: 2560px) {
        :host {
          --app-grid-columns: 3;
        }
      }

      /* High Resolution (2K-4K) screen */

      @media screen and (min-device-width: 2561px) and (max-device-width: 4096px) {
        :host {
          --app-grid-columns: 4;
        }
      }

      /* Print */

      @media print {
        :host {
          margin: 0;
          --app-background-color: transpalent;
          --app-drawer-width: 0;
        }
        body {
          background-color: transparent;
        }
        app-header,
        app-drawer,
        paper-toast,
        #toastVerify {
          display: none;
        }
        .card {
          margin: 0;
          box-shadow: none;
          -webkit-box-shadow: none;
        }
      }
    </style>
  </template>
</dom-module>